<template>
  <nut-popup
    :visible="visible"
    position="center"
    :close-on-click-overlay="true"
    :style="{ width: '600rpx' }"
    @close="handleClose"
  >
    <view class="bg-white rounded-[24rpx] p-[40rpx] w-[540rpx]">
      <!-- 标题 -->
      <view class="text-center mb-[32rpx]">
        <text class="text-[32rpx] font-bold text-[#222]">投诉建议</text>
      </view>
      
      <!-- 内容 -->
      <view class="mb-[40rpx]">
        <view class="text-[28rpx] text-[#666] leading-[1.6] mb-[24rpx]">
          如果您在使用过程中遇到任何问题或有建议，请通过以下方式联系我们：
        </view>
        
        <!-- 邮箱信息 -->
        <view class="bg-[#f8f9fa] rounded-[16rpx] p-[24rpx]">
          <view class="flex items-center mb-[16rpx]">
            <view class="w-[40rpx] h-[40rpx] bg-[#165DFF] rounded-full flex items-center justify-center mr-[12rpx]">
              <text class="text-white text-[20rpx]">📧</text>
            </view>
            <text class="text-[26rpx] font-medium text-[#222] break-all">邮箱地址</text>
          </view>
          <view class="flex items-center justify-between">
            <text class="text-[28rpx] text-[#165DFF] font-medium">complaint@huasheng.com</text>
            <!-- <nut-button 
              size="small" 
              type="primary" 
              class="bg-[#165DFF] text-white rounded-[20rpx] px-[20rpx] py-[8rpx] text-[24rpx]"
              @click="copyEmail"
            >
              复制
            </nut-button> -->
          </view>
        </view>
        
        <!-- 说明文字 -->
        <view class="mt-[24rpx] text-[24rpx] text-[#999] leading-[1.5]">
          我们会在收到您的邮件后24小时内回复，感谢您的反馈！
        </view>
      </view>
      
      <!-- 按钮 -->
      <view class="flex gap-[20rpx]">
        <nut-button 
          size="normal" 
          type="default" 
          class="flex-1 border-[#ddd] text-[#666] rounded-[20rpx] py-[16rpx] text-[28rpx]"
          @click="handleClose"
        >
          取消
        </nut-button>
        <nut-button 
          size="normal" 
          type="primary" 
          class="flex-1 bg-[#165DFF] text-white rounded-[20rpx] py-[16rpx] text-[28rpx]"
          @click="copyEmail"
        >
        复制
        </nut-button>
      </view>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Taro from '@tarojs/taro';

/**
 * 投诉建议弹窗组件
 * @description 显示投诉建议信息，包含邮箱地址和复制功能
 * @performance 使用 NutUI Popup 组件，轻量级实现
 */

interface Props {
  visible: boolean;
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const email = 'complaint@huasheng.com';

/**
 * 关闭弹窗
 */
const handleClose = () => {
  emit('update:visible', false);
};

/**
 * 复制邮箱地址
 */
const copyEmail = async () => {
  try {
    await Taro.setClipboardData({
      data: email
    });
    Taro.showToast({
      title: '邮箱地址已复制',
      icon: 'success',
      duration: 2000
    });
  } catch (error) {
    console.error('复制失败:', error);
    Taro.showToast({
      title: '复制失败，请手动复制',
      icon: 'none',
      duration: 2000
    });
  }
};

/**
 * 发送邮件
 */
const handleSendEmail = () => {
  // 复制邮箱地址到剪贴板
  copyEmail();
  
  // 显示提示
  Taro.showToast({
    title: '邮箱地址已复制，请打开邮件应用',
    icon: 'success',
    duration: 3000
  });
  
  // 延迟关闭弹窗
  setTimeout(() => {
    handleClose();
  }, 1000);
};
</script>
